<template>
  <div>
    <detail-nav-bar />
    <detail-swiper :top-images="topImages" />
    <detail-base-info :goods="goodsInfo"/>
    <h1>详情页</h1>
  </div>
</template>

<script>
import DetailNavBar from "./childComps/DeatilNavBar";
import DetailSwiper from "./childComps/DetailSwiper";
import DetailBaseInfo from "./childComps/DetailBaseInfo"

import { getDetail, Goods } from "network/details";
export default {
  name: "Detail",
  data() {
    return {
      iid: null,
      detail: {},
      topImages: [],
      goodsInfo:{}
    };
  },
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo
  },
  created() {
    /* 方法二：在keep-alive中排除（exclude）Detail组件 */
    this.iid = this.$route.query.iid;
    this.getDetail(this.iid);
  },
  activated() {
    /* 选择actived发送请求是因为keepalive，在created中没有实时刷新iid,所以选择在组件激活时发送数据*/
    /* this.iid = this.$route.query.iid;
    this.getDetail(this.iid) */
  },
  methods: {
    getDetail(iid) {
      getDetail(iid).then(res => {
        const data = res.result;
        this.topImages = data.itemInfo.topImages;
        /* console.log(this.topImages); */
        this.goodsInfo=new Goods(data.itemInfo,data.columns,data.shopInfo.services)
      });
    }
  }
};
</script>

<style scoped lang="scss">
</style>